<template>
  <el-menu
    :style="{ with: !isCollapse ? '230px' : '64px' }"
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="aside-container"
    :default-active="menuActive"
    text-color="#fff"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <p class="logo-lg">{{ isCollapse ? 'IDID' : 'IDID陪诊' }}</p>
    <TreeMenu :menu-data="menuData" :index="1" />
  </el-menu>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
import TreeMenu from './treeMenu.vue'
import { useRouter } from 'vue-router'
import { reactive, computed } from 'vue'
import { useStore } from 'vuex'

const router = useRouter()
console.log(router)

// eslint-disable-next-line no-unused-vars
// const menuData = reactive(router.options.routes[0].children)

const menuData = computed(() => store.state.menu.routerList)

const menuActive = computed(() => store.state.menu.menuActive)

// eslint-disable-next-line no-undef, no-unused-vars
const store = useStore()
// eslint-disable-next-line no-undef, no-unused-vars
const isCollapse = computed(() => store.state.menu.isCollapse)

// eslint-disable-next-line no-unused-vars
const handleOpen = () => {}

// eslint-disable-next-line no-unused-vars
const handleClose = () => {}
</script>

<style lang="less" scoped>
.aside-container{
    height: 100%;
    .logo-lg {
        font-size: 20px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: #fff;
    }
}
</style>
